import React, { PureComponent, Component } from 'react'
import { connect } from 'dva'
import {
  Row,
  Col,
  Input,
  Form,
  DatePicker,
  Space,
  Table,
  Button,
  Modal,
  Switch,
  message,
  TreeSelect,
  Spin,
  Select
} from 'antd';
const { Option } = Select
const { confirm } = Modal;
import { SearchOutlined, ReloadOutlined,EditOutlined ,DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
import {handleTree} from '@/utils/ruoyi.js'

import AddMenu from '@/components/menu/addMenu.js'
import EditMenu from '@/components/menu/editMenu.js'

class SystemMenu extends PureComponent {
  formRef = React.createRef();
  state = {
    loading: true,
    // 查询参数
    queryParams: {
      menuName: undefined,
      status: undefined
    },
     // 菜单表格树数据
     menuList: [],
     addVisible:false,
     menuId:null,
     editVisible:false,
     record:null
  }

  componentWillMount(){
    this.getlist()
  }

  getlist=()=>{    //获取系统数据
    this.setState({
      loading:true
    })
    listMenu(this.state.queryParams).then(res => {
      if(res.code==200){
        this.setState({
          menuList:handleTree(res.data, "menuId"),
          loading:false
        })
      }
    })
  }
  //显示增加菜单弹框
  addVisible=()=>{
    this.setState({
      addVisible:true
    })
  }
  //关闭增加菜单弹框
  addonCancel=()=>{
    this.setState({
      addVisible:false
    })
  }
  //修改菜单弹框
  editMenuVisible=(status,record)=>{
    this.setState({
      menuId:record.menuId,
      editVisible:true,
      record:record
    })

  }
  editonCanCel=()=>{
    this.setState({
      editVisible:false
    })
  }

  //搜索
  onFinish=values=>{
    this.setState({
      queryParams:values
    })
    this.getlist()
  }



  //重置
  Reload = () => {
    this.formRef.current.resetFields()

    this.setState({
      queryParams: {
        menuName: undefined,
        status: undefined
      },
    },()=>{
      this.getlist()
    })
  }


  render() {
    const {menuList,addVisible,menuId,editVisible}=this.state
    const that=this


    const columns = [
      { title: '系统管理', dataIndex: 'menuName',key:'menuName'},
      { title: '排序', dataIndex: 'orderNum',key:'orderNum' },
      { title: '权限标识', dataIndex: 'perms',key:'perms'  },
      { title: '组件路径', dataIndex: 'component',key:'component' },
      { title: '状态', dataIndex: 'status', render: (status, record) => (
        <>
          {record.status=="0"?'正常':'停止'}
        </>
        )
      },
      { title: '创建时间', dataIndex: 'createTime',key:'createTime' },
      { title: '操作', dataIndex: 'action',
      render: (status, record) => (
        <Space size="middle">
          <a onClick={() =>that.editMenuVisible(status,record)}>
            <EditOutlined />
            修改
          </a>
          <a
            onClick={status => {
              confirm({
                title: `是否确认删除菜单编号为${record.menuId}菜单吗?"`,
                icon: <ExclamationCircleOutlined />,
                cancelText: '取消',
                okText: '确定',
                onOk() {
                  delMenu(record.menuId).then(res => {
                    if (res.code == 500) {
                      message.warning(res.msg);
                      return false;
                    } else if (res.code == 200) {
                      message.success('删除菜单编号成功');
                      that.getlist()
                    }
                  });
                },
                onCancel() {
                  message.warning('取消成功');
                },
              });
            }}
          >
            <DeleteOutlined />
            删除
          </a>
        </Space>
      ),

    },

    ];

    return (
      <>
        <Row gutter={24}>
          <Col xs={24}>
            <Form style={{ display: 'flex' }}  onFinish={this.onFinish}
            ref={this.formRef}
            >
              <Form.Item label="菜单名称"
              style={{ marginRight: '20px' }}
              name="menuName"
              >
                <Input
                  style={{ width: '240px' }}
                  placeholder="请输入菜单名称"
                />
              </Form.Item>
              <Form.Item label="状态"   name="status"
              style={{ marginRight: '20px' }}>
                <Select
                placeholder="菜单状态"
                style={{ width: '240px' }}
                >
                  <Option value={"0"}>正常</Option>
                  <Option value={"1"}>停用</Option>
                </Select>
              </Form.Item>
              <Button type="primary"
              style={{ marginRight: '20px' }}
               icon={<SearchOutlined />}
                htmlType="submit"
               >
                搜索
              </Button>
              <Button icon={<ReloadOutlined />} onClick={this.Reload}>
                重置
              </Button>
            </Form>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col>
            <Button type="primary" onClick={this.addVisible} >
              新增
            </Button>
          </Col>
        </Row>

        <Table
          columns={columns}
          dataSource={menuList}
          rowKey={menuList => menuList.menuName}
          pagination={false}
          >
        </Table>

        <AddMenu
          visible={addVisible}
          onCancel={this.addonCancel}
          oninitList={this.getlist}
        ></AddMenu>

      {
        menuId!==null&&
        <EditMenu
        visible={editVisible}
        onCancel={this.editonCanCel}
        oninitList={this.getlist}
        menuId={menuId}
        record={this.state.record}
      >
       </EditMenu>
      }


      </>
    )
  }


}


export default SystemMenu
